<template>
  <div class="home-page">
    <div class="box">
      <van-cell-group>
        <van-field label="上海" placeholder="请输入小区或地址" @click="fn" />
      </van-cell-group>
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="375px" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :border="false">
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="location-o" text="地图找房" />
      <van-grid-item icon="shop-o" text="去出租" />
    </van-grid>

    <van-grid :column-num="2" :gutter="10">
      <van-grid-item v-for="value in 4" :key="value" text="123456789" icon="wechat"/>
    </van-grid>
  </div>
</template>

<script>
import { getHome } from '@/api/user'
export default {
  name: 'home-page',
  data () {
    return {
      list: [],
      images: []
    }
  },
  async created () {
    const data = await getHome()
    // console.log(data)
    this.list = [...this.list, ...data.body]
    // console.log(this.list)
    // console.log(this.list)
    this.images = this.list.map(
      item => 'http://liufusong.top:8080' + item.imgSrc
    )
    // console.log(this.images)
  },
  methods: {
    fn () {
      this.$router.push('/cityList')
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 45px;
  margin-left: 20px;
  background-color: #fff;
  position: absolute;
  margin-top: 20px;
  z-index: 999;
}
</style>
